<template>
  <view class="container">
		<nav-ber :title="'任务广场'" :bgColor="'#f7f8ff'"></nav-ber>
		<view class="u-search-flex">
			<!-- <u-icon @click="gotoproFun" name="map-fill" color="#2979ff"></u-icon>
			<span @click="gotoproFun" class="addr_font">北京</span> -->
			<u-search placeholder="搜索任务名称" v-model="keyword" :showAction="false" shape="round"  @search="searchFun"></u-search>
			<!-- <u-icon class="chat_left" name="chat" color="#2979ff"></u-icon> -->
		</view>
		<view>
			<u-subsection  @change="sectionChange" :list="list" mode="subsection" :current="current"></u-subsection>
		</view>
		<view class="province">
			<scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" @scrolltolower="lower" :lower-threshold="300">
				<view class="items_box" v-for="(item, index) in hallList" :key="index" @click.stop="goTovixFun(item)">
					<view class="font_w">
						<span>{{ item.name }}</span>
						<span>{{ item.province }}</span>
					</view>
					<view class="time_flex">
						<view>
							<view class="mar_20">品种：{{ item.drugName }}</view>
							<view class="mar_20">总任务：{{ item.quantity }}  已申请：{{ item.appliedQty }}</view>
							<view>时间{{ item.startTime }}至{{ item.endTime }}</view>
						</view>
						<view class="button_color" @click.stop="goToRequestFun(item)" v-if="current == 0">
							申请
						</view>
					</view>
				</view>
				<!-- <mySelect :list="[{label:'fasg',value: 1},{label:'fas124235', value:2}]" v-model="ids" type="checkbox"></mySelect> -->
				<u-empty style="margin-top: 100rpx;" v-if="!hallList.length" text="暂无数据" mode="list">
				</u-empty>
				<view v-if="toTheEnd" class="" style="color: gray;margin: 20rpx 0;text-align: center;font-size: 26rpx;">
						我到底了~
				</view>
			</scroll-view>
		</view>
  </view>
</template>
<script>
	import { getHallList, applyList } from '@/api/task.js'
	import { medicalRepresentative } from "@/api/login/index.js"
	import { agencyById  } from '@/api/personalCenter.js' 
  export default {
    data() {
			return {
				toTheEnd: false,
				totals: 0,
				pageNum: 1,
				ids: '2',
				keyword: '',
				ispro: '1',
				list: ['进行中', '已完成'],
				current: 0,
				status: 4,
				hallList: [],
				agencyId: '',
				provinceAll: '',
			}
    },
		mounted() {
			this.getHallListFun()
		},
		onShow() {
			
			if (JSON.parse(uni.getStorageSync('userInfo')).userType == '02') {
				// 代表
				medicalRepresentative(JSON.parse(uni.getStorageSync('userInfo')).userId).then((resmin) => {
					uni.setStorage({
						key: 'userInfoRole',
						data: JSON.stringify(resmin.data)
					})
					this.agencyId = JSON.parse(uni.getStorageSync('userInfoRole')).agencyId
					if (this.agencyId) {
						agencyById(this.agencyId).then((res) => {
							this.provinceAll = res.data.province
						})
					} else {
						this.provinceAll = ''
					}
				})
			} else {
				this.provinceAll = JSON.parse(uni.getStorageSync('userInfoRole')).province
			}
		},
		methods: {
			lower(e) {
				if (this.hallList.length >= this.totals) {
					this.toTheEnd = true
					return
				}
				if (!this.hallList.length) {
					this.toTheEnd = false
				}
				this.pageNum = this.pageNum+1
				this.getHallListFun('add')
			},
			searchFun() {
				this.getHallListFun()
			},
			typeFun(type) {
				let typeText = ""
				switch (type) {
				  case 1:
				    typeText = "拜访";
				    break;
				  case 2:
				    typeText = "调研";
				    break;
				  case 3:
				    typeText = "科室";
				    break;
					case 4:
					  typeText = "学术";
					  break;	
				}
				return typeText
			},
			getHallListFun(add) {
				if (!add) {
					this.hallList = []
					this.pageNum = 1
					this.toTheEnd = false
				}
				getHallList({
					status: this.status,
					name: this.keyword,
					pageNum: this.pageNum,
					pageSize: 10
				}).then((res) => {
						this.totals = res.total
						this.hallList = [...this.hallList, ...res.rows]
				})
			},
			goTovixFun(item) {
				uni.navigateTo({
					url: '/pages/task/visitTask/index?id=' + item.id
					// url:type == 1? "/pages/task/researchTask/index" : "/pages/task/visitTask/index"
				})
			},
			proFun(val) {
				this.ispro = val
			},
			sectionChange(index) {
				this.current = index;
				(index == 1)? (this.status = 6) : (this.status = 4)
				this.getHallListFun()
			},
			goToRequestFun(item) {
				if (!(this.provinceAll?.includes(item.province))) {
					uni.showToast({
						title: `请申请${this.provinceAll || ''}的任务`,
						icon: "none",
						duration: 2500,
					})
					return
				}
				if (item.quantity <= item.appliedQty) {
					uni.showToast({
						title: '已经做完任务了',
						icon: "none",
						duration: 2000,
					})
					return
				}
				uni.navigateTo({
					url: `/pages/task/taskRequest/index?id=${item.id}`
					// url:type == 1? "/pages/task/research/index" : "/pages/task/taskRequest/index"
				})
			},
		}
  }
</script>
<style lang="scss" scoped>
	.sea_pad {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.container {
		background-color: #f7f8ff;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	.pro_list {
		padding: 20rpx 50rpx;
		box-sizing: border-box;
	}
	.pro_list_is {
		background-color: #f7f8ff;
		color: #2979ff;
		position: relative;
	}
	.pro_list_is::before {
		content: '';
		display: block;
		width: 10rpx;
		height: 50rpx;
		background-color: #2979ff;
		position: absolute;
		left: -20rpx;
	}
	.u-search-flex {
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.addr_font {
		color: gray;
		font-size: 25rpx;
		margin: 0 10rpx;
		margin-right: 20rpx;
	}
	.chat_left {
		margin-left: 20rpx;
	}
	.items_box {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.time_flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: gray;
			.mar_20 {
				margin: 15rpx 0;
			}
		}
		.font_w {
			font-weight: 900;
			color: #111;
			span:last-child {
				margin-left: 40rpx;
			}
		}
		.button_color {
			background-color: #2979ff;
			color: #fff;
			padding: 15rpx 20rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
		}
	}
</style>
